<template>
  <view class="container">
    <view class="title">中国儿童银行</view>
    <view class="input-container">
      <input type="text" placeholder="请输入用户名" v-model="username" />
    </view>
    <view class="input-container">
      <input type="password" placeholder="请输入密码" v-model="password" />
    </view>
    <button class="login-btn" @click="login">登录</button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      username: "",
      password: "",
    };
  },
  methods: {
    async login() {
	  let k=this.username;
	  //let b=username
      if (!this.username || !this.password) {
        uni.showToast({
          title: "用户名或密码不能为空",
          icon: "none",
        });
		
        return;
      }else{
		  let u=await this.$api.get(this.$api.prop().serviceUrl+"/common/model/queryByFilter/?modelName=User&username="+this.username+"&password="+this.password,{});
		  debugger
		  if (u.data.total==1){
			  uni.navigateTo({
			  		  
			    url: '/pages/detail/detail?id='+u.data.items[0].id
			  });
			  
			  console.log("登录成功");
		  }else{
			  alert("用户名或者密码错误")
			  console.log("用户名或者密码错误");
		  }
		  debugger;
	  }
	  
      // 在这里添加登录逻辑
	  
    },
  },
};
</script>

<style>
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 0 30rpx;
}

.title {
  font-size: 48rpx;
  font-weight: bold;
  margin-bottom: 50rpx;
}

.input-container {
  width: 80%;
  margin-bottom: 20rpx;
}

input {
  width: 100%;
  height: 80rpx;
  line-height: 80rpx;
  padding: 0 20rpx;
  border: 1px solid #ccc;
  border-radius: 10rpx;
  font-size: 28rpx;
  margin-bottom: 10px;
  border: 1px solid black; /* 添加黑色边缘 */
}

.login-btn {
  width: 100%;
  height: 80rpx;
  line-height: 80rpx;
  background-color: #1AAD19;
  color: #fff;
  font-size: 32rpx;
  text-align: center;
  border-radius: 10rpx;
  margin-top: 40rpx;
}

</style>
